import React, { useEffect, useState } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import './index.css';
import { history } from 'umi';
import axios from 'axios';

export default function Limittime() {
  // 下标
  const [current_index, setcurrent_index] = useState(3);
  // 获取数据
  const [data, setdata] = useState([]);
  // 顶部时间
  const [title, settitle] = useState([
    { id: 1, date: '7月8日', title: '20:00', runing: '进行中' },
    { id: 2, date: '7月9日', title: '20:00', runing: '进行中' },
    { id: 3, date: '7月10日', title: '20:00', runing: '进行中' },
    { id: 4, date: '7月11日', title: '20:00', runing: '进行中' },
    { id: 5, date: '7月12日', title: '20:00', runing: '进行中' },
  ]);

  const getdata = async () => {
    let { data } = await axios.get('http://localhost:3000/yrt/datalist');
    setdata(data.data);
  };

  // 切换id
  const setindex = (id) => {
    setcurrent_index(id);
  };

  // 进入详情页
  const xiang = (obj) => {
    // setgetlist(obj);
    history.push({ pathname: '/duixihuan', state: { ...obj } });
  };

  useEffect(() => {
    getdata();
  }, []);
  return (
    <div id="app">
      <div className="top-wrapper">
        <div className="top-box1">
          <LeftOutlined onClick={() => history.go(-1)} />
          &nbsp;限时兑换
        </div>
        {/* 限时兑换头部导航栏时间 */}
        <div className="top-box2">
          {title.map((item) => (
            <div
              key={item.id}
              onClick={() => setindex(item.id)}
              className={
                current_index == item.id ? 'boxtoptime' : 'boxtoptime2'
              }
            >
              <div className="top1">{item.date}</div>
              <div className="top2">{item.title}</div>
              <div className="top3">{item.runing}</div>
              <div className={current_index == item.id ? 'top4' : ''}></div>
            </div>
          ))}
        </div>
      </div>
      <div className="content-warpper">
        {data.map((item) => (
          <div key={item._id}>
            <div className="content-box">
              <div className="img">
                <img
                  style={{ width: '130px', height: '130px' }}
                  src={item.img}
                  alt=""
                />
              </div>
              <div className="box">
                <div className="zi">
                  {item.title}
                  <div className="price">{item.jinbi}币</div>
                  <del>
                    <div>{item.jinbinum}</div>
                  </del>
                </div>
                <div>
                  <div className="dui" onClick={() => xiang(item)}>
                    马上兑
                  </div>
                  <div
                    style={{
                      color: '#153, 153, 153',
                      fontSize: '6px',
                      marginTop: '2px',
                    }}
                  >
                    已兑换1件
                  </div>
                </div>
              </div>
            </div>
            <hr style={{ color: '#eee' }} />
          </div>
        ))}
      </div>
    </div>
  );
}
